// 头部 nav 修改样式
$(function(){
    // 下载豆瓣客户端
    $('.top_nav_doubanapp').hover(function(){
        $('.link_doubanapp').css('color','#fff');
        $('#top_nav_appintro').show();
        $(this).siblings().find('a').removeClass('hoverColor');
        $(this).siblings().find('.more_items').removeClass('displayShow');
    },function(){
        $('.link_doubanapp').css('color','');
        $('#top_nav_appintro').hide();
    })

    // 提醒
    $('.top_nav_reminder').on('click',function(){
        $('.link_remind').toggleClass('hoverColor');
        $('#top_nav_notimenu').toggleClass('displayShow');
        console.log($(this).siblings().find('.more_items'));
        $(this).siblings().find('a').removeClass('hoverColor'); 
        $(this).siblings().find('.more_items').removeClass('displayShow');
    })

    // 用户
    $('.nav_user_account').on('click',function(){
        $('.bn_more').toggleClass('hoverColor');
        $('#top_nav_account').toggleClass('displayShow');
        $(this).siblings().find('a').removeClass('hoverColor'); 
        $(this).siblings().find('.more_items').removeClass('displayShow'); 
    })
})




// 轮播图函数封装
// 对象obj  原始长度slideLen   一页的宽度pageWidth  一页个数count  最大页数slide_max  
function SwiperFunc(obj,slideLen,pageWidth,count,slideMax,autoplay){
    // 1、初始化对象
    var slide_content = obj + ' .ul_slide_content',
        slide_index = obj + ' .ul_slide_index',
        btn_next = obj + ' .btn_next',
        btn_prev = obj + ' .btn_prev'; 

        
    // 8、鼠标移入移出  轮播停止
    // 判断是否要求自动播放，如果是则添加hover事件
    if(autoplay){
        $(slide_content).hover(function(){
            clearInterval(timer);
        },function(){
            timer = setInterval(timeFun,10000);// 重启定时器
        })
    }


    // 2、、追加 第一页 和 最后一页
    // 第一页切换页 加在尾部
    var firstBox = $(slide_content).find('li').clone().splice(0,count);
    for(var i = 0; i<firstBox.length; i++){
        $(slide_content).append(firstBox[i]);
    }

    // 最后一页切换页  加在头部
    var deBlankCount = 0;                // 最后一页非空白个数
    if(slideLen % count != 0){deBlankCount = slideLen % count;}
    else{deBlankCount = count;}

    var startIndex = slideLen - deBlankCount;  // 19-4 = 15  起始索引 20-1
    var lastBox = $(slide_content).find('li').clone().splice(startIndex,deBlankCount);
    // 加空白
    for(var i = 0; i<(count-deBlankCount); i++){
        $(slide_content).prepend('<li class="ul_slide_item"></li>');
    }
    for(var i = lastBox.length-1; i>=0; i--){
        $(slide_content).prepend(lastBox[i]);
    }



    var flag = true;     // 6、节流
    var currentIdx = 1;  // 起始页 为 第1页
    var ulMove = 0;      // ul 移动距离
    function ulMove_dotChange(currentIdx,time){
        // ul移动
        ulMove = - currentIdx * pageWidth;
        // console.log(ulMove);
        $(slide_content).stop().animate({
            left:ulMove
        },time,function(){
            flag = true;
            key = true;
        });

        // 小圆点样式改变
        $(obj+' .dot').eq(currentIdx-1).addClass('activate').siblings().removeClass('activate');
    }


    // 3、小圆点切换
    // 判断当前对象下是否有小圆点，有才进行样式切换
    var dotCount = $(obj+' .dot').length;  // 小圆点个数
    $(obj+' .dot').on('click',function(){
        var item = $(this).index();
        console.log(item);
        
        // 轮播图动画停止 且 不是当前页面对应的小圆点时 执行
        if(flag && currentIdx != item){
            flag = false;     // 轮播图节流
            key = false;      // 鼠标移入展示详细信息节流
            

            // ul 移动
            currentIdx = item;
            ulMove_dotChange(currentIdx,500);
        }  
    })
    

    // 4、下一页
    $(btn_next).on('click',function(){
        if(flag){
            flag = false;     // 轮播图节流
            key = false;      // 鼠标移入展示详细信息节流
            currentIdx++;
            $(slide_index).html(currentIdx);       // 修改页码

            if(currentIdx == slideMax + 1){             // 第1页 到 最后一页
                currentIdx = 1;
                $(slide_index).html(currentIdx);   // 修改页码
                ulMove = - (currentIdx-1) * pageWidth;
                $(slide_content).css('left',ulMove);
            }

            // ul移动 + dot样式切换
            ulMove_dotChange(currentIdx,1000);
        }
    })

    // 5、上一页
    $(btn_prev).on('click',function(){
        if(flag){
            flag = false;     // 轮播图节流
            key = false;      // 鼠标移入展示详细信息节流
            currentIdx--;
            $(slide_index).html(currentIdx);        // 修改页码

            if(currentIdx == 0){                          // 最后1页到第1页
                currentIdx = slideMax;
                $(slide_index).html(currentIdx);    // 修改页码
                ulMove = - (currentIdx + 1) * pageWidth;
                $(slide_content).css('left',ulMove);
            }

            // ul移动 + dot样式切换
            ulMove_dotChange(currentIdx,1000);
        }
    })

    // 判断是否要求自动播放，如果是则添加定时器
    // 7、自动播放 定时器
    if(autoplay){
        var timer = setInterval(timeFun,6000);
        function timeFun(){
            $(btn_next).trigger('click');
        }
    }
}


// 星级 函数封装
function ratingStar(rate){
    // 星级  背景图位置修改
    var ratingClass = '';
    switch(rate >= 0){
        case rate>=9.5:{ratingClass='star-5';}break;
        case rate>=8.5 && rate<9.5:{ratingClass='star-4p';}break;
        case rate>=7.5 && rate<8.5:{ratingClass='star-4';}break;
        case rate>=6.5 && rate<7.5:{ratingClass='star-3p';}break;
        case rate>=5.5 && rate<6.5:{ratingClass='star-3';}break;
        case rate>=4.5 && rate<5.5:{ratingClass='star-2p';}break;
        case rate>=3.5 && rate<4.5:{ratingClass='star-2';}break;
        case rate>=2.5 && rate<3.5:{ratingClass='star-1p';}break;
        case rate>=1.5 && rate<2.5:{ratingClass='star-1';}break;
        case rate>=0.5 && rate<1.5:{ratingClass='star-0p';}break;
        case rate>=0:{ratingClass='star-0';}break;
        default:break;
    }
    return ratingClass;
}




// 正在热映
$(function(){
    var key = true;      // 鼠标移入展示详细信息节流

    // 数据渲染
    $.ajax({
        type:'post',
        url:'/postScreeningList',
        success:function(res){
            var len = res.length;
            var slide_max = Math.ceil(res.length / 5);  // 页数
            $('.screening .ul_slide_max').html(slide_max);         // 设置页码
            var count = 5;                              // 默认一行5个

            var ul_slide_item = '',detailInfo = '';
            function reNewItem(i){
                var subject_rate = 'subject_rate';
                var ratingClass = '';
                var rating_star_span = '';
                if(res[i].rating == '暂无评分'){
                    ratingClass = '';
                    rating_star_span = '';
                    subject_rate = 'subject_rate_noRating';
                }
                else{
                    ratingClass = ratingStar(res[i].rating);
                    rating_star_span = `<span class="rating_star ${ratingClass}"></span>`;
                }
                ul_slide_item = `<li class="ul_slide_item" data-index = ${i}>
                                    <div class="poster">
                                        <a href="javascript:void(0);"><img src="${res[i].imgURL}" alt=""></a>
                                    </div>
                                    <div class="title">
                                        <a href="javascript:void(0);">${res[i].name}</a>
                                    </div>
                                    <div class="rating">
                                        ${rating_star_span}
                                        <span class="${subject_rate}">${res[i].rating}</span>
                                    </div>
                                    <div class="ticket_btn">
                                        <span><a href="javascript:void(0);">选座购票</a></span>
                                    </div>
                                    
                                </li>`;
                var alias = '';
                if(res[i].alias != ''){alias = `<span class="alias">${res[i].alias}</span>`;}
                detailInfo = `<div class="detailInfo">
                                <div class="de_title">
                                    <span class="name">${res[i].name}</span>
                                    ${alias}
                                    <span class="releaseTime">${res[i].releaseTime}</span>
                                </div>
                                <div class="rate_reviews">
                                    ${rating_star_span}
                                    <span class="${subject_rate}">${res[i].rating}</span>
                                    <span class="review">(<span>${res[i].review}</span>人评价)</span>
                                </div>
                                <div class="time_country">
                                    <span class="duration">${res[i].duration}</span>
                                    <span class="country">${res[i].country}</span>
                                </div>
                                <div class="director_actor">
                                    <span>导演<span class="director">${res[i].director}</span></span>
                                    <span>主演<span class="actor">${res[i].actor}</span></span>
                                </div>
                            </div>`;
            }

            // ul数据渲染
            for(var i = 0; i<res.length; i++){
                reNewItem(i);
                $('.screening .ul_slide_content').append(ul_slide_item);
            }
            // 最后一页 是 不满5个的情况  添加空白的li用于占位
            if(res.length % 5 != 0){
                count = res.length % 5;
                for(var i = 0; i<(5-count); i++){
                    $('.screening .ul_slide_content').append('<li class="ul_slide_item"></li>');
                }
            }

            // 启动轮播图
            var page_width = ($('.screening .ul_slide_item').width() + parseInt($('.screening .ul_slide_item').css('margin-right').replace('px',''))) * 5;     // 每一页宽度
            var autoplay = true;   // 开启自动播放
            // 对象  原始长度   一页的宽度  一页个数  最大页数   自动播放
            SwiperFunc('.screening',res.length,page_width,5,slide_max,autoplay);


            // 移入展示详细信息
            $('.screening .ul_slide_item .poster img').hover(function(e){
                // setTimeout(timeout,500);
                // function timeout(){
                    //  key 鼠标移入展示详细信息节流
                    // 只有在轮播图动画停止时，key=true，鼠标移入时才能展示效果
                    if(key){
                        var index = $(e.target).parents('.ul_slide_item').attr('data-index')
                        reNewItem(index);
                        $('.screening').append(detailInfo);
                        var width = $('.screening .ul_slide_item').width();
                        var left = (index % 5 + 1) * width + parseInt($('.screening .ul_slide_item').css('margin-right').replace('px','')) * (index % 5) + 'px';
                        $('.screening .detailInfo').css('left',left);
                    }
                // }
            },function(){
                $('.screening .detailInfo').remove();
            })

        },
        error:function(err){
            console.log('err',err);
        }
    })
})



// 最近热门电影 + 最近热门电视剧  全局变量+函数封装
{
    var allData = [],currentType = '',currentTypeData = [];  // 当前类型，当前类型的数据

    var obj = '';                                                   // 对象
    var ul_len = 0;                                                 // ul原始长度 及 li的个数
    var page_width = 0;                                             // 每一页宽度
    var itemCount = 10;                                             // 一页item个数
    var count = 1;                                                  // 一页li个数
    var slide_max = 0;                                              // 最大页数
    var ulWidth = 0;                                                // ul的总宽度


    // 更新当前模块 的数据
    function updateCurrentTypeData(currentType){
        switch(currentType){
            case 'hot':{
                currentTypeData = allData[currentType];
                console.log(currentTypeData);
            }break;
            case 'newest':{
                currentTypeData = allData[currentType];
                console.log(currentTypeData);
            }break;
            case 'highScore':{
                currentTypeData = allData[currentType];
                console.log(currentTypeData);
            }break;
            case 'upsetGreat':{
                currentTypeData = allData[currentType];
                console.log(currentTypeData);
            }break;
            case 'chinese':{
                currentTypeData = allData[currentType];
                console.log(currentTypeData);
            }break;
            case 'west':{
                currentTypeData = allData[currentType];
                console.log(currentTypeData);
            }break;
            case 'korea':{
                currentTypeData = allData[currentType];
                console.log(currentTypeData);
            }break;
            case 'japan':{
                currentTypeData = allData[currentType];
                console.log(currentTypeData);
            }break;
            case 'guess':{
                currentTypeData = allData[currentType];
                console.log(currentTypeData);
            }break;
            default:{currentTypeData = allData['hot'];
                console.log(currentTypeData);}break;
        }
    }

    // 渲染数据 + 计算并修改一些页面数据
    function appendData(obj,itemCount,slide_max){
        /*
            obj : 对象
            itemCount : 一页的个数
            slide_max : 最大页数
        */
        
        // 清空 ul 和 小圆点 的内容
        $(obj+' .ul_slide_content').html('');
        $(obj+' .slide_control .dot').remove();
        
        // 数据渲染
        for(var i = 0; i<slide_max; i++){
            if(i == slide_max - 1 && currentTypeData.length % 10 != 0) itemCount = currentTypeData.length % 10;   // 数据个数 有余数 的情况

            var ul_slide_item = '<li class="ul_slide_item">';
            for(var j = 0; j<itemCount; j++){
                var index = (i*itemCount) + j;

                // 是否是 '新片'
                var isNewMovieIC = '';
                if(currentTypeData[index].isNewMovie == true){
                    isNewMovieIC = `<span class="green"><img src="./img/ic_new-movie.png" alt=""></span>`;
                }
                
                var subject_rate = 'subject_rate';
                var ratingClass = '',rating_star_span = '';
                if(currentTypeData[index].rating == '暂无评分'){
                    ratingClass = '';
                    rating_star_span = '';
                    subject_rate = 'subject_rate_noRating';
                }
                else{
                    ratingClass = ratingStar(currentTypeData[index].rating);
                    rating_star_span = `<span class="rating_star ${ratingClass}"></span>`;
                }

                var item = `<a href="javascript:void(0);" class="item" data-index="${index}">
                                <div class="cover_img"><img src="${currentTypeData[index].imgURL}" alt=""></div>
                                <p>
                                    ${isNewMovieIC}
                                    ${currentTypeData[index].name}
                                    <span class="${subject_rate}">${currentTypeData[index].rating}</span>
                                </p>
                            </a>`;
                ul_slide_item += item;
            }
            ul_slide_item += '</li>';
            $(obj+' .ul_slide_content').append(ul_slide_item);


            // 追加小圆点
            var dotBtn = '';
            if($(obj+' .ul_slide_content .ul_slide_item').length == 1){
                dotBtn = `<i class="dot activate"></i>`;
            }
            else{ dotBtn = `<i class="dot"></i>`; }
            $(obj+' .slide_control .btn_next').before(dotBtn);
    

            // 计算 
            page_width = $(obj+' .ul_slide_item').width();   // 每一页宽度
            ul_len = $(obj+' .ul_slide_content li').length;  // ul原始长度 及 li的个数
            ulWidth = page_width * (slide_max+2); // 追加完所有页的li 计算ul的总宽度 // +2 因为要添加两个虚假的li

            // 修改ul宽度
            $(obj+' .ul_slide_content').width(ulWidth);
        }
    }

    // 基础操作（事件+发起请求-接收数据）
    function operation(obj,url){
        currentType = $(obj+' .filter a:first-child').get(0).dataset.type;    // 页面加载完，初始是第一个label 即'热门'

        var key = true;      // 鼠标移入展示详细信息节流

        // 图片移入移出 显示/隐藏 详细信息
        function hoverShowDetail(){
            $(obj+' .ul_slide_item .item .cover_img').hover(function(e){
                if(key){
                    $(obj+' .detailInfo').html('');  // 清空

                    var index = $(e.target).parents('.item').attr('data-index');   // 当前数据的索引值
                    var data = currentTypeData[index];
                    
                    // 星级和评分
                    var subject_rate = 'subject_rate';
                    var ratingClass = '';
                    var rating_star_span = '';
                    if(data.rating == '暂无评分'){
                        ratingClass = '';
                        rating_star_span = '';
                        subject_rate = 'subject_rate_noRating';
                    }
                    else{
                        ratingClass = ratingStar(data.rating);
                        rating_star_span = `<span class="rating_star ${ratingClass}"></span>`;
                    }

                    // 小标签
                    var newMovie = '',playable='',meta='<p class="meta">';
                    if(data.isNewMovie){
                        newMovie = '<span class="green">本周新片</span>';
                        meta += newMovie;
                    }
                    if(data.playable){
                        playable = '<span class="green">可播放</span>';
                        meta += playable;
                    }
                    data.detail.meta.forEach((item)=>{
                        meta += `<span>${item}</span>`;
                    })
                    meta += '</p>';
                    
                    var detailInfo = `<div class="wp">
                                        <div class="info">
                                            <h3><a href="javascript:void(0);">${data.detail.alias}</a></h3>
                                            <p class="rank">
                                                ${rating_star_span}
                                                <span class="${subject_rate}">${data.rating}</span>
                                            </p>
                                            ${meta}
                                            <p class="collect_area">
                                                <a href="javascript:void(0);">想看</a>
                                                <a href="javascript:void(0);">看过</a>
                                            </p>
                                        </div>
                                        <p class="comment">
                                            ${data.detail.comment.content}
                                            <span class="author">- ${data.detail.comment.author}的短评</span>
                                        </p>
                                    </div>`;
                    // .gaia_movie  追加
                    $(obj+' .detailInfo').html(detailInfo);
                    $(obj+' .detailInfo').css('display','block');

                    // 计算 left  top
                    var width = $(e.target).parents('.item').width(),                          // 元素宽度
                        gaiaOffsetLeft = $(e.target).parents(obj).offset().left,    // ul距离 父级ul 的左侧 的偏移量
                        imgOffsetLeft = $(e.target).parents('.item').offset().left,            // img距离 父级ul 的左侧 的偏移量
                        gaiaOffsetTop = $(e.target).parents(obj).offset().top,      // ul距离 父级ul 的顶部 的偏移量
                        imgOffsetTop = $(e.target).parents('.item').offset().top;              // img距离 父级ul 的顶部 的偏移量
                    
                    var left = imgOffsetLeft - gaiaOffsetLeft + width + 'px',
                        top = imgOffsetTop - gaiaOffsetTop + 'px';

                    // detailInfo   修改left  top
                    $(obj+' .detailInfo').css('left',left);
                    $(obj+' .detailInfo').css('top',top);

                }
            },function(e){
                // 鼠标移入展示详细信息
                var mouseX = e.pageX,
                    mouseY = e.pageY;                                          // 鼠标的位置
                var imgOffsetTop = $(this).offset().top,
                    imgOffsetLeft = $(this).offset().left;  // 图片的位置
                var imgWidth = $(this).width(),
                    imgHeight = $(this).height();                    // 图片的宽高
                    
                //   移出图片左侧                移出图片上方               移出图片下方
                if(mouseX-imgOffsetLeft <= 0 || mouseY-imgOffsetTop <= 0 || mouseY-imgOffsetTop >= imgHeight){
                    $(obj+' .detailInfo').css('display','none');
                }
            })

            // 详细信息移入移出
            $(obj+' .detailInfo').hover(function(){},function(){
                $(this).css('display','none');
            })
        }


        // 小标签 点击时，更新当前类型及数据
        $(obj+' .filter a').on('click',function(e){
            $(e.target).addClass('activate').siblings().removeClass('activate');
            currentType = e.target.dataset.type;          // 更新当前类型
            console.log(currentType);

            updateCurrentTypeData(currentType);     // 更新当前类型的数据

            slide_max = Math.ceil(currentTypeData.length / itemCount);  // 重新计算 最大页数
            appendData(obj,itemCount,slide_max);  // 渲染数据 + 计算并修改一些页面数据

            // 启动轮播图
            var autoplay = false;   // 不开启自动播放
            SwiperFunc(obj,ul_len,page_width,count,slide_max,autoplay);// 对象  原始长度   一页的宽度  一页个数  最大页数  自动播放 

            hoverShowDetail();  // 鼠标移入展示详细信息
        })


        $.ajax({
            type:'post',
            url:url,
            success:function(res){
                allData = res;     // 将数据赋值给全局函数
                
                updateCurrentTypeData(currentType);   // 更新当前类型的数据

                slide_max = Math.ceil(currentTypeData.length / itemCount);  // 重新计算最大页数
                appendData(obj,itemCount,slide_max);  // 渲染数据 + 计算并修改一些页面数据

                // 启动轮播图
                var autoplay = false;   // 不开启自动播放
                SwiperFunc(obj,ul_len,page_width,count,slide_max,autoplay);// 对象  原始长度   一页的宽度  一页个数  最大页数  自动播放 

                hoverShowDetail();  // 鼠标移入展示详细信息
            },
            error:function(err){
                console.log('err',err);
            }
        })
            
    }
}

// 最近热门电影
operation('.gaia_movie','/postHotMovie');

// 最近热门电视剧
operation('.gaia_tv','/postHotTV');



// 热门推荐
$(function(){
    // 轮播图 数据渲染
    $.ajax({
        type:'post',
        url:'/postHotGallery',
        success:function(res){
            var slide_max = res.length;
            $('.gallery_frames .ul_slide_max').html(slide_max);         // 设置页码

            var ul_slide_item = '';
            function reNewItem(i){
                ul_slide_item = `<li class="ul_slide_item">
                                    <div class="gallery_frame">
                                        <a href="javascript:void(0);" class="pic"><img src="${res[i].imgURL}" alt=""></a>
                                        <div class="gallery_detail">
                                            <div class="gallery_hd">
                                                <a href="javascript:void(0);"><h3>${res[i].title}</h3></a>
                                            </div>
                                            <div class="gallery_bd">
                                                <p>${res[i].detail}</p>
                                            </div>
                                        </div>    
                                    </div>
                                </li>`;
            }

            // ul数据渲染
            for(var i = 0; i<res.length; i++){
                reNewItem(i);
                $('.gallery_frames .ul_slide_content').append(ul_slide_item);
            }

            // 启动轮播图
            var page_width = ($('.gallery_frames .ul_slide_item').width());     // 每一页宽度
            var autoplay = true;   // 开启自动播放
            // 对象  ul原始长度   一页的宽度  一页个数  最大页数  

            SwiperFunc('.gallery_frames',res.length,page_width,1,slide_max,autoplay);
        },
        error:function(err){
            console.log('err',err);
        }
    })

})



// 最受欢迎的影评
$(function(){
    // 轮播图 数据渲染
    $.ajax({
        type:'post',
        url:'/postPopularReviews',
        success:function(res){
            var ul_slide_item = '';
            function reNewItem(i){
                var ratingClass = ratingStar(res[i].rating);
                ul_slide_item = `<div class="review_item">
                                    <div class="review_item_hd">
                                        <a href="javascript:void(0);"><img src="${res[i].imgURL}" alt=""></a>
                                    </div>
                                    <div class="review_item_bd">
                                        <h3>
                                            <a href="javascript:void(0);">${res[i].title}</a>
                                        </h3>
                                        <div class="review_item_meta">
                                            <a href="javascript:void(0);" class="userName">${res[i].userName}</a>
                                            <span> 评论</span>
                                            <a href="javascript:void(0);" class="name">${res[i].name}</a>
                                            <span class="rating_star ${ratingClass}"></span>
                                        </div>
                                        <div class="review_item_content">
                                            ${res[i].content}
                                            <a href="javascript:void(0);">(全文)</a>
                                        </div>
                                    </div>
                                </div>`;
            }

            // ul数据渲染
            for(var i = 0; i<res.length; i++){
                reNewItem(i);
                $('.reviews_bd').append(ul_slide_item);
            }
            $('.review_item').last().addClass('last');
        },
        error:function(err){
            console.log('err',err);
        }
    })

})